<template>
    <div class="noticebox">
      <p>
        <router-link to="/">首页</router-link>
        <span style="margin: 0 10px">/</span>
        <span style="font-weight: bold;">通知咨询</span>
      </p>
      <Title />
      <div class="content clearfix">
        <ul class="menu left">
          <li v-for="item of menus" :key="item.id" 
            @click="changeMenu(item)"
            :class="item.current && 'current'">
            <span class="iconfont" style="margin-right: 10px;" v-html="item.icon"></span>
            <span>{{ item.title }}</span>
          </li>
        </ul>
        <div class="left information">
          <Panel title="最新资讯" width="800px" v-show="currentMenu.id === 1">
            <ul slot="content">
                <li class="flex between" v-for="item of informations" :key="item.id">
                    <div><a class="middle" href="#">{{ item.title }}</a></div>
                    <div><span class="middle">{{ item.data }}</span></div>
                </li>
            </ul>
          </Panel>
          <Panel title="安全指导办法" width="800px" v-show="currentMenu.id === 2">
              <ul slot="content">
                  <li class="flex between" v-for="item of informations" :key="item.id">
                      <div><a class="middle" href="#">{{ item.title }}</a></div>
                      <div><span class="middle">{{ item.data }}</span></div>
                  </li>
              </ul>
          </Panel>
        </div>
      </div>
    </div>
  </template>
  
  <script>

  import Title from '@/components/Title'
  import Panel from '@/components/Panel'

  export default {
    components: {
      Title,
      Panel
    },
    data() {
      return {
        menus: [
          { id: 1, title: '最新咨询', icon: '&#xe624;', current: true },
          { id: 2, title: '安全指导办法', icon: '&#xe786;', current: false }
        ],
        currentMenu: {},
        informations: [
          { id: '1', title: '中国特色社会主义的伟大历程', data: '2023-02-18' },
          { id: '2', title: '深入学习《党的十六大》', data: '2023-02-18' },
          { id: '3', title: '危机管理中的媒体应对与危机转化（一）', data: '2023-02-18' },
          { id: '4', title: '中国特色社会主义的伟大历程', data: '2023-02-18' },
          { id: '5', title: '解读《党的十六大》', data: '2023-02-18' },
          { id: '6', title: '危机管理中的媒体应对与危机转化（一）', data: '2023-02-18' }
        ],
      }
    },
    mounted() {
      this.currentMenu = this.menus[0]
    },
    methods: {
      changeMenu(item) {
        this.currentMenu = item
        this.menus.forEach(m => m.current = m.id === item.id)
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .current {
    font-weight: 600;
    color: var(--color-primary);
  }
  .noticebox {
    padding-top: 40px;
    .content {
      margin-bottom: 30px;
      .menu {
        width: 380px;
        margin-right: 20px;
        border-right: 1px solid #eee;
        li {
          padding: 10px 0;
          cursor: pointer;
        }
      }
      .information {
        li {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
      }
    }
  }
  </style>